<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<body>
 <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width:860px;height:500px;text-align: center;border:none;float:left;"></div>
<div style="border:none;padding-left: 25px;height:50px;float:left;margin-top: 40px;">
	<label> 选择年份：</label>
	<select id="years" onchange="yearSelected()">
		<option value="-1">---请选择---</option>
	</select>          
</div>
<script type="text/javascript" src="static/js/echarts.min.js"></script>
<script type="text/javascript">
$(function(){
	var dd = new Date();
	var currentYear = dd.getFullYear();
	var size = currentYear - 2010 + 1;
	
	for( var i=0; i<size; i++ ){
		var yearOld = currentYear-i;
		$("#years").append($("<option value="+yearOld+">"+yearOld+"年"+"</option>"));
	}
});

/* 获取选中的下拉框的值 */
function yearSelected(){
	var valueSel = $("#years").find("option:selected").val();
	var renshu = [];     //类别数组（实际用来盛放X轴坐标值）
		$.ajax({
			async : true, //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行） 
		 	url : "bao-biao",
			type : "post",
			data:{
				datesj:valueSel
			},
			success:function(d){
				console.log(d);
				if(d[0]==null){
					return;
				}
				for (var i = 0; i <12; i++) {
					renshu.push(d[0][""+(i+1)+""]);
				}
				myChart.setOption({ //加载数据图表
					series : [ {
	 					// 根据名字对应到相应的系列
	 					name : '收益',
	 					data : renshu
	 				}]
	 				
		 		}); 
			}
		});
		myChart.setOption(option);
}



var myChart = echarts.init(document.getElementById('main'));     
option = {
	    title : {
	        text: '某地区蒸发量和降水量',
	        subtext: '纯属虚构'
	    },
	    tooltip : {
	        trigger: 'axis'
	    },
	    legend: {
	        data:['收益']
	    },
	    toolbox: {
	        show : true,
	        feature : {
	            mark : {show: true},
	            dataView : {show: true, readOnly: false},
	            magicType : {show: true, type: ['line', 'bar']},
	            restore : {show: true},
	            saveAsImage : {show: true}
	        }
	    },
	    calculable : true,
	    xAxis : [
	        {
	            type : 'category',
	            data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
	        }
	    ],
	    yAxis : [
	        {
	            type : 'value'
	        }
	    ],
	    series : [
	        {
	            name:'收益',
	            type:'bar',
	            data:[],
	            markPoint : {
	                data : [
	                    {type : 'max', name: '最大值'},
	                    {type : 'min', name: '最小值'}
	                ]
	            },
	            markLine : {
	                data : [
	                    {type : 'average', name: '平均值'}
	                ]
	            }
	        },
	    ]
	};
	
var dddd=null;
var renshu = [];     //类别数组（实际用来盛放X轴坐标值）
$.ajax({
	async : true, //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行） 
 	url : "bao-biao",
	type : "post",
	data:{
		datesj:dddd
	},
	success:function(d){
		 for (var i = 0; i <12; i++) {
				renshu.push(d[0][""+(i+1)+""]);
			}
		myChart.setOption({ //加载数据图表
			series : [ {
					// 根据名字对应到相应的系列
					name : '收益',
					data : renshu
				}]
				
 		}); 
	}
});
myChart.setOption(option);
</script> 
</body>
</html>
